import './App.css'
import { Routes, Route, Link } from 'react-router-dom'
import Login from '@/views/Login'
import Home from '@/views/Home'
import Test1 from '@/views/Test1'
import Test2 from '@/views/Test2'
import Demo from '@/views/Demo'
import User from '@/views/User'
import NoMatch from '@/views/NoMatch'
function App() {
  return (
    <>
      <div>
        {/* 利用 Link 组件定义导航按钮,最终渲染的是 a 标签 */}
        <Link to="/home">首页</Link>
        <Link to="/login">登录页</Link>
        <Link to="/users">用户</Link>
        <Link to="/users/demo">用户-demo</Link>
        <Link to="/xxxx">404</Link>
      </div>
      {/* Route必须被Routes包裹 */}
      {/* Route写在哪里,则Route对应的组件就渲染在哪里(这一点只针对一级路由) */}
      <Routes>
        <Route path="/" Component={Home} />
        {/* 等价于下面 */}
        {/* <Route path="/" element={<Home />} /> */}

        {/* path属性用于定义路径  element属性用于定义当前路径所对应的组件 */}
        <Route path="/login" element={<Login />}></Route>

        {/* path也可以忽略  */}
        <Route path="/home" element={<Home />}>
          {/*Route里面的Route就是嵌套路由,Test1和Test2渲染在Home组件中*/}
          <Route path="/home/test1" element={<Test1 />}></Route>
          <Route path="/home/test2" element={<Test2 />}></Route>
        </Route>

        {/*Route 也可以不写element. 入按照下面的方式定义,则展示Demo组件的路径为: /users/xxx */}
        <Route path="/users">
          {/* 子路由默认访问页 */}
          <Route index element={<User />} />
          <Route path="demo" element={<Demo />} />
        </Route>

        <Route path="*" element={<NoMatch />}></Route>
      </Routes>
    </>
  )
}

export default App
